<template>
    <div class="container">
      <div class="header">抗炎食物与促炎食物</div>
      <div class="food-categories">
        <div class="category" v-for="(category, index) in categories" :key="index" @click="handleCategoryClick(category)">
          <div class="icon" :class="category.iconClass"></div>
          <div class="name">{{ category.name }}</div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        categories: [
          { name: '蔬菜类', iconClass: 'vegetable' },
          { name: '水果类', iconClass: 'fruit' },
          { name: '主食类', iconClass: 'staple' },
          { name: '肉类', iconClass: 'meat' },
          { name: '油脂类', iconClass: 'oil' },
          { name: '饮品类', iconClass: 'drink' }
        ]
      };
    },
    methods: {
      handleCategoryClick(category) {
        console.log(`选择了${category.name}分类`);
        // 这里可以添加点击分类项的逻辑，例如跳转到对应分类的详情页面
      }
    },
    created() {
      // 这里可以添加页面创建时的逻辑，例如获取数据等
    }
  };
  </script>
  
  <style scoped>
  .container {
    min-height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .header {
    width: 100%;
    background-color: #f9e15e;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
  }
  
  .food-categories {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 0;
  }
  
  .category {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    cursor: pointer;
  }
  
  .icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }
  
  .name {
    font-size: 1rem;
    color: #333;
  }
  
  .vegetable {
    background-color: #e0f2e9;
    border-radius: 10px;
  }
  
  .fruit {
    background-color: #fff0f0;
    border-radius: 10px;
  }
  
  .staple {
    background-color: #f0f0f0;
    border-radius: 10px;
  }
  
  .meat {
    background-color: #f9e1e1;
    border-radius: 10px;
  }
  
  .oil {
    background-color: #fff9e1;
    border-radius: 10px;
  }
  
  .drink {
    background-color: #fff5e1;
    border-radius: 10px;
  }
  </style>